<template>
  <div class="kk-button" :style="Round+Box.join('')" :class="{kkno:no!=undefined&&no!==false}">
    <button
      :style="Style.join('')+Button.join('')"
      @mouseenter="SetEnter()"
      @mouseleave="SetLeave()"
      @click="SetClick()"
    >
      <svg ref="dsvg" :style="`${Style.join('')}width:${Width}vw;height:45%;`">
        <text ref="tsvg" x="50%" y="85%" text-anchor="middle" :style="`font-size:${Size}vw`">
          <a v-if="val">{{val}}</a>
          <slot v-if="!val" />
        </text>
      </svg>
    </button>
  </div>
</template>

<script>
export default {
  name: "kk-button",

  // 接收参数
  props: {
    thick: null, // 底色按钮
    radiu: null, // 是否启动圆角
    color: null, // 按钮颜色
    val: null, // 动态值（使用时会屏蔽插槽）
    no: null // 禁用按钮
  },

  // 页面对象
  data: () => ({
    Width: null, // 宽度
    Size: null, // 字号
    Color: null, // 按钮颜色

    /* ------------------------------- 分割线 ------------------------------- */

    Round: "", // 圆角

    /* ------------------------------- 分割线 ------------------------------- */

    Box: [],
    Style: [
      "box-sizing:border-box;",
      "position:relative;",
      "overflow:visible;",
      "font-size:0vw;",
      "display:block;",
      "fill:inherit;"
    ], // 通用样式
    Button: [
      "padding-top:0vw;padding-bottom:0vw;",
      "user-select:none;cursor:pointer;",
      "background-color:transparent;",
      "outline:none;border:none;",
      "height:100%;width:100%;",
      "text-align:inherit;",
      "line-height:1;"
    ] // 按钮样式
  }),

  // 动态监听
  watch: {
    val() {
      this.$nextTick(() => this.SetSize()); // 内容渲染完成后执行
    }
  },

  // 生命周期函数：挂载前调用
  created() {
    this.Color = {
      blueberry: ["64,158,255", "217,236,255", "84,178,255"],
      mushroom: ["144,147,153", "233,233,235", "164,167,153"],
      cherry: ["245,108,108", "253,226,226", "245,128,128"],
      matcha: ["103,194,58", "225,243,216", "123,214,78"],
      yolk: ["230,162,60", "250,236,216", "250,182,60"]
    }[this.color];
    this.SetLeave();
  },

  // 生命周期函数：挂载后调用
  mounted() {
    this.SetSize();
  },

  // 页面方法
  methods: {
    // 设置尺寸
    SetSize() {
      const // 创建对象
        W = document.body.clientWidth, // 获取窗口长度
        H = this.$refs.dsvg.getBoundingClientRect().height; // 抽取组件高度
      this.Size = (H / W) * 100; // 赋值字号
      this.Button[6] = `padding-left:${this.Size}vw;padding-right:${this.Size}vw;`;
      this.Round = "position:relative;overflow:hidden;";

      // 判断圆角模式
      if (this.radiu != undefined) {
        this.Round += `border-radius:${this.Size * 1.5}vw;`;
      } else {
        this.Round += `border-radius:${this.Size / 3}vw;`;
      }

      // 内容渲染完成后
      this.$nextTick(() => {
        const X = this.$refs.tsvg.getBoundingClientRect().width / W; // 计算内容宽度
        this.Width = X * 100; // 赋值宽度
      });
    },

    // 鼠标移入
    SetEnter() {
      this.$emit("mouseenter"); // 移入事件
      if (this.Color) {
        this.Box = [
          "fill:rgb(255,255,255);",
          `border-color:rgb(${this.Color[this.thick != undefined ? 2 : 0]});`,
          `background-color:rgb(${
            this.Color[this.thick != undefined ? 2 : 0]
          });`
        ];
      } else {
        this.Box = [
          "fill:rgb(64,158,255);",
          "border-color:rgb(64,158,255);",
          `background-color:rgb(${
            this.thick != undefined ? "217,236,255" : "255,255,255"
          });`
        ];
      }
    },

    // 鼠标移出
    SetLeave() {
      this.$emit("mouseleave"); // 移出事件
      if (this.Color) {
        this.Box = [
          this.thick != undefined
            ? "fill:rgb(255,255,255);"
            : `fill:rgb(${this.Color[0]});`,
          `border-color:rgb(${this.Color[0]});`,
          `background-color:rgb(${
            this.Color[this.thick != undefined ? 0 : 1]
          });`
        ];
      } else {
        this.Box = [
          "fill:rgb(48,49,51);",
          "border-color:rgb(48,49,51);",
          "background-color:rgb(255,255,255);"
        ];
      }
    },

    // 按钮事件
    SetClick() {
      this.$emit("click"); // 点击事件
    }
  }
};
</script>

<style scoped>
.kk-button {
  display: inline-block;
  border-width: 0.05vw;
  border-style: solid;
  text-align: center;
  height: 1.4vw;
}

.kkno::after {
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  cursor: no-drop;
  content: " ";
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}
</style>